<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础功能</text>
         <uv-swiper :list="list1" @change="change" @click="click"></uv-swiper>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">带标题</text>
         <uv-swiper
            :list="list2"
            keyName="image"
            showTitle
            :title-style="{ color: 'red', textAlign: 'center' }"
            :autoplay="false"
            circular
         ></uv-swiper>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">带指示器</text>
         <uv-swiper :list="list3" indicator indicatorMode="line" circular></uv-swiper>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">加载中</text>
         <uv-swiper :list="list3" :loading="loading"></uv-swiper>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">嵌入视频</text>
         <uv-swiper :list="list4" keyName="url" :autoplay="false"></uv-swiper>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义指示器</text>
         <uv-swiper :list="list5" @change="e => (current = e.current)" :autoplay="false">
            <template v-slot:indicator>
               <view class="indicator">
                  <view
                     class="indicator__dot"
                     v-for="(item, index) in list5"
                     :key="index"
                     :class="[index === current && 'indicator__dot--active']"
                  >
                  </view>
               </view>
            </template>
         </uv-swiper>
         <uv-gap bgColor="transparent" height="15"></uv-gap>
         <uv-swiper
            :list="list6"
            @change="e => (currentNum = e.current)"
            :autoplay="false"
            indicatorStyle="right: 20px"
         >
            <template v-slot:indicator>
               <view class="indicator-num">
                  <text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
               </view>
            </template>
         </uv-swiper>
      </view>
      <!-- #ifndef APP-NVUE || MP-TOUTIAO -->
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">卡片式</text>
         <uv-swiper
            :list="list3"
            previousMargin="30"
            nextMargin="30"
            circular
            :autoplay="false"
            radius="5"
            bgColor="#ffffff"
         ></uv-swiper>
      </view>
      <!-- #endif -->
   </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';

// 响应式数据
const current = ref(0);
const currentNum = ref(0);
const loading = ref(true);

const list1 = ref([
   'https://picsum.photos/750/400?random=4',
   'https://picsum.photos/750/400?random=5',
   'https://picsum.photos/750/400?random=6',
]);

const list2 = ref([
   {
      image: 'https://picsum.photos/750/400?random=7',
      title: '昨夜星辰昨夜风，画楼西畔桂堂东',
      type: 'image',
   },
   {
      image: 'https://picsum.photos/750/400?random=8',
      title: '身无彩凤双飞翼，心有灵犀一点通',
   },
   {
      image: 'https://picsum.photos/750/400?random=9',
      title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
   },
]);

const list3 = ref([
   'https://picsum.photos/750/400?random=10',
   'https://picsum.photos/750/400?random=11',
   'https://picsum.photos/750/400?random=12',
]);

const list4 = ref([
   {
      url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
      title: '昨夜星辰昨夜风，画楼西畔桂堂东',
      poster: 'https://picsum.photos/750/400?random=13',
   },
   {
      url: 'https://picsum.photos/750/400?random=14',
      title: '身无彩凤双飞翼，心有灵犀一点通',
   },
   {
      url: 'https://picsum.photos/750/400?random=15',
      title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
   },
]);

const list5 = ref([
   'https://picsum.photos/750/400?random=16',
   'https://picsum.photos/750/400?random=17',
   'https://picsum.photos/750/400?random=18',
]);

const list6 = ref([
   'https://picsum.photos/750/400?random=19',
   'https://picsum.photos/750/400?random=20',
   'https://picsum.photos/750/400?random=21',
]);

// 方法
const change = (e: any) => {
   // console.log('change', e);
};

const click = (e: any) => {
   console.log('click', e);
};

onMounted(() => {
   uni.$uv.sleep(3000).then(() => {
      loading.value = false;
   });
});
</script>

<style lang="scss" scoped>
@use '@/common/demo.scss';
.indicator {
   @include flex(row);
   justify-content: center;

   &__dot {
      height: 6px;
      width: 6px;
      border-radius: 100px;
      background-color: rgba(255, 255, 255, 0.35);
      margin: 0 5px;
      transition: background-color 0.3s;

      &--active {
         background-color: #ffffff;
      }
   }
}

.indicator-num {
   padding: 2px 0;
   background-color: rgba(0, 0, 0, 0.35);
   border-radius: 100px;
   width: 35px;
   @include flex;
   justify-content: center;

   &__text {
      color: #ffffff;
      font-size: 12px;
   }
}
</style>
